<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyword">
						<el-input v-model="queryParams.keyword" placeholder="请输入关键词" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search" />
					</el-form-item>
					<el-form-item label="审批状态" prop="orderStatus">
						<el-select v-model="queryParams.orderStatus" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_order_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="付款方式" prop="paymentType">
						<el-select v-model="queryParams.paymentType" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_pay_status" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="业务经理" prop="businessManagerId">
						<el-select v-model="queryParams.businessManagerId" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
								:value="dict.userId" />
						</el-select>
					</el-form-item>
					<el-form-item label="订单时间" prop="time">
						<datePickerRange ref="clearPicker" @dateRangeValue="changeTime"></datePickerRange>	
					</el-form-item>
				</div>
				<el-form-item style="margin-right: 0">
					<div class="flex col-center row-end">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<div>
					<span class="fb fs16">订单列表</span>
				</div>
				<div>
					<el-button type="defaultBtn" @click="handleAdd" v-hasPermi="['allOrder:add']">
						新建订单
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" 
				:summary-method="getSummaries"
			    show-summary
				:header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				<el-table-column label="订单编号" align="center" prop="orderNumber" width="110">
					<template v-slot="scope">
						<span class="main-color cursor" @click="detail(scope.row)">{{scope.row.orderNumber}}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" align="center" prop="createTime" />
				<el-table-column label="客户姓名" align="center" prop="customerName">
					<template v-slot="scope">
						{{scope.row.customerName}}
					</template>
				</el-table-column>
				<el-table-column label="审批状态" align="center" prop="orderStatus"  width="200">
					<template v-slot="scope">
						<div class="flex col-center row-center"
						:class="activeStatus(scope.row.orderStatus)"
						>
							<span class="drop"></span>
							<dict-tag :options="bus_order_status" :value="scope.row.orderStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="订单金额" align="center" prop="orderTotalAmount" width="220">
					<template v-slot="scope">
						￥{{scope.row.orderTotalAmount}}
					</template>
				</el-table-column>
				<el-table-column label="付款方式" align="center" prop="paymentMethod" >
					<template v-slot="scope">
						<dict-tag :options="bus_pay_status" :value="scope.row.paymentMethod" />
					</template>
				</el-table-column>
				<el-table-column label="付款类型" align="center" prop="paymentType" >
					<template v-slot="scope">
						<dict-tag :options="bus_pay_type" :value="scope.row.paymentType" />
					</template>
				</el-table-column>
				<!-- <el-table-column label="已回款金额" align="center" prop="receivedAmount" /> -->
				<!-- 全款的话就显示全款金额，定金的话就显示定金金额+回款金额 -->
				<!-- <el-table-column label="已回款金额" align="center" prop="receivedAmount" /> -->
				<el-table-column label="已回款金额" prop="Receivedpayment" align="center"  width="220">
					<template v-slot="scope">
						<div>合计：￥{{scope.row.Receivedpayment}}</div>
						<!-- <div>
							1001:定金 1002：全款 
							<span v-if="scope.row.paymentType == '1001'">
								 定金金额+回款金额 
								合计：￥{{scope.row.depositAmount*1+scope.row.receivedAmount*1}}
							</span>
							<span v-else-if="scope.row.paymentType == '1002'">
								合计：￥{{scope.row.depositAmount}}
							</span>
						</div> -->
					</template>
				</el-table-column>
				<el-table-column label="发货信息" align="center" prop="logistics" width="120">
					<template v-slot="scope">
						<div class="main-color cursor" @click="checkExpress(scope.row)">查看发货信息</div>
					</template>
				</el-table-column>
				<el-table-column label="业务经理" align="center" prop="businessManager" />
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleEnd(scope.row)"
						v-hasPermi="['order:end']"
						>
							结束订单
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<!-- 查看物流弹窗 -->
		<logist ref="expressDialog"></logist>
		<!-- 结束订单 -->
		<errorPop ref="error" :item="propItem" :type="0" :id="id" @refresh="getList"></errorPop>
		<!-- 新建订单弹窗 -->
		<operateOrder ref="addOrder" @refreshList="getList()"></operateOrder>
		
		<task-handle ref="taskHandler" :header="-1" @taskSubmitEvent="handleQuery"></task-handle>
	</div>
</template>

<script >
	import {
		orderList, //列表
		orderDel,//删除
		findProcess,//查询业务流程
	} from "@/api/business/order";
	import {
		getUserListData //查业务经理
	} from "@/api/business/teamOpportunity";
	import logist from './components/logist.vue'
	import errorPop from './components/error.vue'//结束订单弹窗
	import { getTask, queryMineTask } from "@/views/flyflow/api/task"
	import operateOrder from './components/operateBox.vue' //新建订单弹窗
	import TaskHandle from "@/views/flyflow/components/task/handler/task.vue"
	export default {
		components:{
			operateOrder,
			logist,
			errorPop,
			TaskHandle
		},
		data() {
			return {
				result:'',//结束订单理由
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					customerId: '', //
					endTime: '',
					startTime: '', //
					belongDepartment: '', //归属部门
					createBy: '', //归属人员
					businessManager: '', //业务经理
					businessManagerId:'',
					keyword: '', //关键字,
					paymentType: '', //付款方式
					orderStatus: '', //订单状态
					sort: false, //排序方向 ture 正序 false 倒序
					sortKey: 'create_time', //创建时间
				}, //查询参数
				address: [],
				bus_order_status: this.useDict('bus_order_status').bus_order_status,
				bus_pay_status: this.useDict('bus_pay_status').bus_pay_status,
				bus_pay_type:this.useDict('bus_pay_type').bus_pay_type,
				teamOptions: [], //业务经理
				id:'',//要结束的订单id
			}
		},
		created() {
			this.getList()
			this.getUserList()
		},
		methods: {
			getSummaries(param) {
				const { columns, data } = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 4 || index == 7) {
						// sums[index] = '合计';
						// return;
					
						const values = data.map(item => Number(item[column.property]));
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								if (!isNaN(value)) {
									return prev + curr;
								} else {
									return prev;
								}
							}, 0);
							sums[index] = '合计：' + sums[index].toFixed(2) + ' 元';
						} else {
							sums[index] = '';
						}
					}
				});

				return sums;
			},
			// 查看发货信息
			checkExpress(row){
				this.$refs.expressDialog.open(row.yyLogisticsInformation)
			},
			//时间
			changeTime(e) {
				this.queryParams.startTime = e[0]
				this.queryParams.endTime = e[1]
			},
			//查询列表
			getList() {
				this.loading = true;
				orderList(this.queryParams).then((response) => {
					this.list = response.rows;
					for(let key in this.list){
						// 定金金额+回款金额
						if(this.list[key].paymentType == '1001'){
							this.list[key].Receivedpayment = this.list[key].depositAmount*1+this.list[key].receivedAmount*1
						}else if(this.list[key].paymentType == '1002'){
							this.list[key].Receivedpayment = this.list[key].depositAmount
						}
						// <span v-if="scope.row.paymentType == '1001'">
						// 	<!-- 定金金额+回款金额 -->
						// 	合计：￥{{scope.row.depositAmount*1+scope.row.receivedAmount*1}}
						// </span>
						// <span v-else-if="scope.row.paymentType == '1002'">
						// 	合计：￥{{scope.row.depositAmount}}
						// </span>
					}
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.$refs.clearPicker.clearPickerValue()
				this.queryParams.startTime = ''
				this.queryParams.endTime = ''
				this.resetForm("queryForm");
				this.handleQuery();
			},
			//新增
			handleAdd() {
				this.$refs.addOrder.open('')
				// this.$router.push('/order/orderAdd')
			},
			//编辑
			handleEdit(row){
				// this.$router.push('/order/orderAdd?id='+row.id)
			},
			//结束订单
			handleEnd(row){
				this.id = row.id
				this.$refs.error.open()
			},
			//详情
			detail(value){
				let data = {
					processId:value.processNumber
				}
				findProcess(data).then(res=>{
					let row = res.data
					// let data1 = {
					// 	taskId: value.processNumber
					// }
					this.$refs.taskHandler.deal(row)
				})
				return false;
				this.$router.push('/order/orderDetail?orderNumber='+row.orderNumber+'&type=1')
			},
			// 单条编辑
			handleUpdate(row) {
				this.detail = ''
				this.ids = []
				this.selectUserIds = []
				performanceDetail(row.id).then(res => {
					if (res.code == 200) {
						this.detail = res.data
						setTimeout(() => {
							this.$refs.dialogStatus.open()
						}, 500)
					}
				})
			},
			//批量编辑
			editBatch() {
				this.detail = ''
				this.$refs.dialogStatus.open()
				this.$forceUpdate()
			},
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除编号为"' + ids + '"的数据项？')
					.then(function() {
						orderDel(ids).then(res => {
							that.getList()
							this.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			},
			// 获取业务经理
			getUserList() {
				//获取自己和同部门的用户信息
				getUserListData().then(response => {
					this.teamOptions = response.data;
				});
			},
		}
	}
</script>
<style>
	.el-textarea .el-input__count{
		background-color: transparent;
	}
</style>